<template>
  <div class="sys-menu-container">
    <el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="769px" :destroy-on-close="true">
      <template #header>
        <div style="color: #ffffff">
          <el-icon size="16" style="display: inline; margin-right: 3px; vertical-align: middle"> <Edit /> </el-icon>
          <span> {{ state.title }} </span>
        </div>
      </template>
      <el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="80px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item :label="$t('message.menuInfo.parent')">
              <el-cascader
                :options="props.menuData"
                :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'title' }"
                :placeholder="$t('message.menuPlaceholder.parentMenu')"
                clearable
                style="width: 100%"
                v-model="state.ruleForm.parentId"
              >
                <template #default="{ node, data }">
                  <span>{{ data.title }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item
              :label="$t('message.menuInfo.menuType')"
              prop="menuType"
              :rules="[{ required: true, message: t('message.menuAlter.titleEmpty'), trigger: 'blur' }]"
            >
              <el-radio-group v-model="state.ruleForm.menuType">
                <el-radio v-for="d in props.dictData" :key="d.value" :value="d.value">{{ d.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item
              :label="$t('message.menuInfo.title')"
              prop="title"
              :rules="[{ required: true, message: t('message.menuAlter.titleEmpty'), trigger: 'blur' }]"
            >
              <el-input v-model="state.ruleForm.title" :placeholder="$t('message.menuInfo.title')" clearable />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item
              :label="$t('message.menuInfo.path')"
              :rules="[{ required: true, message: t('message.menuAlter.pathEmpty'), trigger: 'blur' }]"
            >
              <el-input v-model="state.ruleForm.path" :placeholder="$t('message.menuInfo.path')" clearable />
            </el-form-item>
          </el-col>

          <template v-if="state.ruleForm.menuType === 'menu' || state.ruleForm.menuType === 'dirctory'">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item :label="$t('message.menuInfo.name')">
                <el-input v-model="state.ruleForm.name" :placeholder="$t('message.menuInfo.name')" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item :label="$t('message.menuInfo.component')">
                <el-input v-model="state.ruleForm.component" :placeholder="$t('message.menuInfo.component')" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item :label="$t('message.menuInfo.icon')">
                <SelectIcon v-model:icon-value="state.ruleForm.icon" :placeholder="$t('message.menuInfo.icon')" type="all" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item :label="$t('message.menuInfo.isLink')">
                <el-radio-group v-model="state.ruleForm.isLink">
                  <el-radio :value="true">{{ $t("message.menuInfo.yes") }}</el-radio>
                  <el-radio :value="false">{{ $t("message.menuInfo.no") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item :label="$t('message.menuInfo.link')">
                <el-input v-model="state.ruleForm.link" :placeholder="$t('message.menuPlaceholder.link')" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item :label="$t('message.menuInfo.sortCode')">
                <el-input-number v-model="state.ruleForm.sortCode" :placeholder="$t('message.menuInfo.sortCode')" class="w100" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item :label="$t('message.menuInfo.isHide')">
                <el-radio-group v-model="state.ruleForm.isHide">
                  <el-radio :value="true">{{ $t("message.menuInfo.hide") }}</el-radio>
                  <el-radio :value="false">{{ $t("message.menuInfo.noHide") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item :label="$t('message.menuInfo.isKeepAlive')">
                <el-radio-group v-model="state.ruleForm.isKeepAlive">
                  <el-radio :value="true">{{ $t("message.menuInfo.keepAlive") }}</el-radio>
                  <el-radio :value="false">{{ $t("message.menuInfo.noKeepAlive") }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </template>
          <template v-if="state.ruleForm.menuType === 'btn'">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item :label="$t('message.menuInfo.btnPath')">
                <el-input v-model="state.ruleForm.path" :placeholder="$t('message.menuPlaceholder.btnPath')" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item :label="$t('message.menuInfo.sortCode')">
                <el-input-number v-model="state.ruleForm.sortCode" :placeholder="$t('message.menuInfo.sortCode')" class="w100" />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel" size="default">{{ $t("message.commonBtn.cancel") }}</el-button>
          <el-button type="primary" @click="submit" size="default">{{ $t("message.commonBtn.submit") }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="sysEditMenu">
import { reactive, ref } from "vue";
import SelectIcon from "@/components/SelectIcon/index.vue";
import { feature } from "@/utils/axios-utils";
import { SysMenu, DictData } from "@/api-services/models/system";
import menuApi from "@/api-services/apis/system/menuApi";
import { useI18n } from "vue-i18n";
import { NotificationError, NotificationSuccess } from "@/utils/notification";

const { t } = useI18n();
const emits = defineEmits(["refresh"]);
const props = defineProps({
  dictData: Array<DictData.SysDictData>,
  menuData: Array<SysMenu.SysMenuInfo>
});

const ruleFormRef = ref();
const state = reactive({
  title: "",
  isShowDialog: false,
  type: "",
  ruleForm: {} as SysMenu.MenuInput
});

// 打开弹窗
const openDialog = async (type: string, row: SysMenu.SysMenuInfo) => {
  state.type = type;
  if (type === "edit") {
    state.title = t("message.menuInfo.editMenu");
    state.ruleForm = JSON.parse(JSON.stringify(row));
  } else {
    state.title = t("message.menuInfo.addMenu");
    state.ruleForm = {} as SysMenu.MenuInput;
    // 新增的时候，默认上级为选中行
    state.ruleForm.parentId = row?.id;
  }
  state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.isShowDialog = false;
};

// 取消
const cancel = () => {
  state.isShowDialog = false;
};

// 提交
const submit = () => {
  ruleFormRef.value.validate(async (valid: boolean) => {
    if (!valid) return;
    let err: Error | null;
    if (!state.ruleForm.parentId) state.ruleForm.parentId = 0;
    if (state.type === "add") {
      [err] = await feature(menuApi.add(state.ruleForm));
    } else {
      [err] = await feature(menuApi.update(state.ruleForm));
    }
    if (err) {
      NotificationError(err.message);
    } else {
      NotificationSuccess(state.title + t("message.commontInfo.success"));
      emits("refresh");
      closeDialog();
      state.ruleForm = {};
    }
  });
};

// 导出对象
defineExpose({ openDialog });
</script>
